<template>
  <view class="container">
    <!-- 身份 -->
    <view class="section">
      <view class="section-title">您的身份</view>
      <view class="types-identity">
        <view
          class="type-item"
          v-for="(item, index) in types"
          :key="index"
          :class="{ active: selectedType === item.value }"
          @click="handleRadioClick(item.value)">
          <view
            class="radio-circle"
            :class="{ active: selectedType === item.value }">
            <view
              class="inner-circle"
              v-if="selectedType === item.value"></view>
          </view>
          <text class="label">{{ item.label }}</text>
        </view>
      </view>
    </view>
    <view class="section">
      <view class="section-title">评价</view>
      <view class="types-text">
        <u--textarea
          v-model="form.content"
          placeholder="请输入内容"
          height="130"
          border="none"></u--textarea>
      </view>
      <view class="types-rate">
        <view class="rate-item">
          <view class="label">安全</view>
          <view class="rate">
            <uni-rate
              color="#bbb"
              active-color="#1CA9FE"
              :value="form.safe"
              @change="onSafeChange" />
          </view>
        </view>
        <view class="rate-item">
          <view class="label">卫生</view>
          <view class="rate">
            <uni-rate
              color="#bbb"
              active-color="#1CA9FE"
              :value="form.health"
              @change="onHealthChange" />
          </view>
        </view>
        <view class="rate-item">
          <view class="label">服务</view>
          <view class="rate">
            <uni-rate
              color="#bbb"
              active-color="#1CA9FE"
              :value="form.service"
              @change="onServiceChange" />
          </view>
        </view>
      </view>
    </view>
    <!-- 图片上传 -->
    <view class="upload-section">
      <view class="section-title">上传图片 ({{ imgList.length }}/3)</view>
      <view class="upload-box">
        <u-upload
          uploadIcon="photo"
          uploadIconColor="#0094f8"
          :fileList="imgList"
          @afterRead="afterRead"
          @delete="deletePic"
          :maxCount="3"
          :previewImage="true"></u-upload>
      </view>
    </view>
    <view class="submit_btn" @click="submit_comment">提交</view>
  </view>
</template>

<script>
import { addComments } from "@/api/houseresources.js";
export default {
  data() {
    return {
      types: [
        {
          label: "看房客户",
          value: "1",
        },
        {
          label: "租客",
          value: "2",
        },
      ],
      selectedType: "1",
      form: {
        house_id: "",
        type: "1",
        content: "",
        safe: 0,
        health: 0,
        service: 0,
        images: [],
      },
      imgList: [],
    };
  },
  onLoad(e) {
    this.form.house_id = e.house_id;
  },
  methods: {
    handleRadioClick(value) {
      this.selectedType = value;
      this.form.type = value;
    },
    onSafeChange(e) {
      this.form.safe = e.value;
    },
    onHealthChange(e) {
      this.form.health = e.value;
    },
    onServiceChange(e) {
      this.form.service = e.value;
    },
    afterRead(e) {
      uni.showLoading({
        title: "上传中...",
      });
      this.imgList.push(e.file);
      this.uploadFile(e.file.url).then((res) => {
        uni.hideLoading();
        this.form.images.push(JSON.parse(res.data).code.fullurl);
      });
    },
    uploadFile(url) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: this.$Config.HTTP_REQUEST_URL + "/api/common/ossUpload", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            file: url,
          },
          header: {
            token: uni.getStorageSync("userInfo").token,
          },
          success: (res) => {
            resolve(res);
          },
        });
      });
    },
    deletePic(e) {
      this.imgList.splice(e.index, 1);
      this.form.images.splice(e.index, 1);
    },
    submit_comment() {
      if (
        this.form.safe == 0 ||
        this.form.health == 0 ||
        this.form.service == 0
      ) {
        uni.showToast({
          title: "请打分",
          icon: "error", //如果要纯文本，不要icon，将值设为'none'
          duration: 2000, //持续时间为 2秒
        });
      }else{
				addComments(this.form).then((res)=>{
					console.log(res)
					if(res.response.data.code==1){
						uni.showToast({
						  title: "评价成功",
						  icon: "success", //如果要纯文本，不要icon，将值设为'none'
						  duration: 2000, //持续时间为 2秒
						});
						uni.navigateBack()
					}
				})
			}
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  min-height: 100vh;
  background: #f5f6fa;
}

.section {
  margin: 24rpx;
  border-radius: 12rpx;

  .section-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 24rpx;
  }

  .types-identity {
    padding: 30rpx 80rpx;
    background: #fff;
    box-sizing: border-box;
    margin-bottom: 24rpx;
    display: flex;
    justify-content: space-between;

    .type-item {
      height: 40rpx;
      display: flex;
      align-items: center;
      padding: 0 32rpx;
      background: #fff;
      border-radius: 8rpx;

      &.active {
        border-color: #2979ff;
      }

      .radio-circle {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        border: 2rpx solid #cccccc;
        margin-right: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        transition: all 0.2s;

        &.active {
          border-color: #2979ff;
          border-width: 2rpx;

          .inner-circle {
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            background-color: #2979ff;
          }
        }
      }

      .label {
        font-size: 28rpx;
        color: #333;
      }
    }
  }

  .types-text {
    padding: 30rpx;
    background: #fff;
    box-sizing: border-box;
    margin-bottom: 24rpx;
  }

  .types-rate {
    padding: 30rpx;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .rate-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;

      &:nth-child(2) {
        margin: 32rpx 0;
      }
    }
  }
}

.upload-section {
  margin: 24rpx;
  border-radius: 12rpx;

  .section-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 24rpx;
  }

  .upload-box {
    box-sizing: border-box;
    padding: 24rpx;
    background: #fff;

    .upload-btn {
      width: 160rpx;
      height: 160rpx;
      background: #f5f6fa;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.submit_btn {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: constant(safe-area-inset-bottom);
  /* iOS 11.2 */
  bottom: env(safe-area-inset-bottom);
  /* iOS 11.2 */
  width: 670rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: #0095f8;
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 149, 248, 0.5);
  border-radius: 44rpx;
  margin: 130rpx auto 0;
  color: #fff;
  font-size: 30rpx;
  font-weight: 500;
  text-align: center;
}

.safe-area-inset-bottom {
  width: 100%;
  background-color: #fff;
}
</style>
